<template>
	<view class="TUIChat-container">
		<view v-for="(item, index) in option" :key="index" :id="'view' + item.ID">
		<view class="message-item" >
				<view class="message-bubble">
				<u-image v-if="item.avatar" width="70rpx" height="70rpx" border-radius="5rpx"
					:src="item.avatar"></u-image>
				<u-image v-else width="70rpx" height="70rpx" border-radius="5rpx"
					 src="@/static/images/avatar.jpg"></u-image>
				<view class="text">
				<view class="name">{{item.nick}}</view>
						<view class="content">
						<MessageText  :id="item.flow + '-' + item.ID" v-if="item.messageBody[0].type === 'TIMTextElem'"
							:data="handleTextMessageShowContext1(item)" :messageData="item"></MessageText>
						<MessageImage :id="item.flow + '-' + item.ID" v-if="item.messageBody[0].type === 'TIMImageElem'"
							:data="handleImageMessageShowContext1(item)" :messageData="item"></MessageImage>
						<MessageVideo :id="item.flow + '-' + item.ID" v-if="item.messageBody[0].type === 'TIMVideoFileElem'"
							:data="handleVideoMessageShowContext1(item)" :messageData="item" @tap="toggleShow(item)" />
						<MessageFile :data="handleFileMessageShowContext1(item)"
							:item="item" :id="item.flow + '-' + item.ID" v-if="item.messageBody[0].type === 'TIMFileElem'"/>	
						<MessageAudio :id="item.flow + '-' + item.ID" v-if="item.messageBody[0].type === 'TIMSoundElem'"
							:data="handleAudioMessageShowContext1(item)" :messageData="item"/>
						<!-- <MessageFace :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_FACE"
							:data="handleFaceMessageShowContext(item)" :messageData="item" />
						<MessageCustom :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_CUSTOM"
							:data="handleCustomMessageShowContext(item)" :messageData="item"/>
						<MessageMerger :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_MERGER"
							:data="handleMergerMessageShowContext(item)" :messageData="item"/> -->
						</view>
						</view>
				</view>
				</view>
					</view>
	</view>
</template>

<script lang="ts">
	import {
		onNavigationBarButtonTap,
		onLoad,
	} from "@dcloudio/uni-app";
	import {
		useI18n
	} from "vue-i18n";
	import {
		caculateTimeago
	} from "../../TUIKit/utils/date";
	import MessageText from "../../TUIKit/TUIPages/TUIChat/components/message-elements/message-text.vue";
	import MessageImage from "../../TUIKit/TUIPages/TUIChat/components/message-elements/message-image.vue";
	import MessageVideo from "../../TUIKit/TUIPages/TUIChat/components/message-elements/message-video.vue";
	import MessageAudio from "../../TUIKit/TUIPages/TUIChat/components/message-elements/message-audio.vue";
	import MessageFace from "../../TUIKit/TUIPages/TUIChat/components/message-elements/message-face.vue";
	import MessageFile from "../../TUIKit/TUIPages/TUIChat/components/message-elements/message-file.vue";
	import {
		defineComponent,
		reactive,
		toRefs,
	} from "vue";
	import {
		handleAvatar,
		handleTextMessageShowContext1,
		handleImageMessageShowContext1,
		handleVideoMessageShowContext1,
		handleAudioMessageShowContext1,
		handleFileMessageShowContext1,
		handleFaceMessageShowContext,
		handleLocationMessageShowContext,
		handleMergerMessageShowContext,
		handleTipMessageShowContext,
		handleCustomMessageShowContext,
	} from "../../TUIKit/utils/untis";
	export default defineComponent({
		components: {
			MessageText,
			MessageImage,
			MessageVideo,
			MessageAudio,
			MessageFace,
			MessageFile,
		},
		setup(props) {
			const data = reactive({
				scrollTop:0,
				text:"",
				option:null,
				url:'',
				});
			const {
				t
			} = useI18n();	
			onNavigationBarButtonTap((e) => {
				if (e.text == '关闭') {
					uni.navigateBack()
				}
			});
			onLoad(options => {
				uni.setNavigationBarTitle({
					title:t('chat.chat_mergertitle')
				});  
				data.option = JSON.parse(options.lists)
				console.log('1111111111111111111'+JSON.stringify(data.option[0]))
				// for(var i in data.option){
				// 	console.log(data.option[i])
				// }
			});
			const toggleShow = (e) => {
				data.url=e.messageBody[0].payload.videoUrl
				console.log(JSON.stringify(data.url))
				uni.navigateTo({
					url: `../../TUIKit/TUIPages/TUIChat/components/message-elements/video-play?videoMessage=${data.url}`
				})
			};
			return {
				...toRefs(data),
				caculateTimeago,
				handleTextMessageShowContext1,
				handleImageMessageShowContext1,
				handleVideoMessageShowContext1,
				handleAudioMessageShowContext1,
				handleFileMessageShowContext1,
				handleFaceMessageShowContext,
				handleLocationMessageShowContext,
				handleMergerMessageShowContext,
				handleTipMessageShowContext,
				handleCustomMessageShowContext,
				toggleShow,
			}
		}
	})
</script>

<style lang="scss" scoped>
	.text{
		margin-left: 5px;
	}
	.name {
	  font-weight: 400;
	  font-size: 12px;
	  color: #999999;
	  letter-spacing: 0;
	}
	.message-bubble {
	  width: 100%;
	  display: flex;
	  padding: 8px;
	  box-sizing: border-box;
	}
	.content {
		max-width: 600rpx;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		// padding: 10px;
	    background: #fff;
	    border-radius: 0px 10px 10px 10px;
	    
	  }
</style>